<template>
  <custom-dialog
      ref="dialogRef"
      v-model="visibleModel"
      title="数据编辑"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @opened="onOpened"
  >
    <div class="data-table-edit_wrapper" :style="style">
      <template v-for="(column,index) in tableWidget.options.tableColumns">
        <template v-if="column.widgetList.length > 0" v-for="(subWidget,swIdx) in column.widgetList">
          <component :is="subWidget.type + '-widget'"
                     :field="subWidget"
                     :in-table-flag="true"
                     :columnProp="column.prop"
                     :parent-list="column.widgetList"
                     :index-of-parent-list="swIdx"
                     :parent-widget="tableWidget">
          </component>
        </template>
        <template v-else>
          <div>
            <span class="ep-form-item__label" style="width: 80px">
              {{ column.label }}
            </span>
            <span>{{ getObjectValue(row, column.prop) }}</span>
          </div>
        </template>
      </template>
    </div>
    <el-button @click="test">关闭</el-button>
    <template #footer>
      <el-button @click="handleSubmit" type="primary">保存</el-button>
      <el-popconfirm title="确定要重置表单吗?" @confirm="handleReset">
        <template #reference>
          <el-button type="danger">重置</el-button>
        </template>
      </el-popconfirm>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </custom-dialog>
</template>
<script>
import FieldComponents from "@/components/form-designer/form-widget/field-widget";
import refMixin from "@/components/form-render/refMixin";

export default defineComponent({
  name: "data-table-item-dialog",
  components: FieldComponents,
  mixins: [refMixin]
})
</script>
<script setup>
import {getObjectValue, setObjectValue, traverseWidgetsOfDataTable} from "@/utils/util";
import XEUtils from "xe-utils"
import CustomDialog from "@/components/common/custom-dialog/index.vue";
import {TABLE_EDIT_TYPE} from "@/utils/constants";

const visibleModel = defineModel()
const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  },
  tableWidget: {
    type: Object,
    default: () => ({})
  },
  tableWidgetRef: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['setColumnWidgetListValue', 'saveFormData'])
const dialogRef = ref(null)
const style = reactive({
  gridTemplateColumns: `repeat(${props.tableWidget.options.tableColumns.length > 18 ? 4 : 3}, 1fr)`
})

const onOpened = () => {
  emit('setColumnWidgetListValue', props.row)
}
const created = () => {
  //设置标签为右对齐，并且显示标签
  traverseWidgetsOfDataTable(props.tableWidget.options.tableColumns, (widget) => {
    widget.options.labelAlign = widget.options.labelAlign || 'right'
    widget.options.labelHidden = false
  })
}
const handleSubmit = () => {
  /*const tableWidgetIds = []
  traverseWidgetsOfDataTable(props.tableWidget.options.tableColumns, (widget) => {
    tableWidgetIds.push(widget.id)
  })
  // console.log(tableWidgetIds);
  props.tableWidgetRef.getFormRef().validateFields(tableWidgetIds, (valid, fields) => {
    if (valid) {
      emit('saveFormData', props.row)
      visibleModel.value = false
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })*/
  emit('saveFormData', props.row, TABLE_EDIT_TYPE.DIALOG)
}
const handleReset = () => {
  emit('setFormData', props.row)
}
const handleClose = () => {
  dialogRef.value.close()
}
created()

onMounted(() => {

})

function test() {
  props.tableWidgetRef.$refs.formRef.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped lang="scss">
.data-table-edit_wrapper {
  display: grid;
  grid-gap: 10px;
}

.data-table-edit_wrapper {
  :deep(.ep-form-item__label) {
    font-weight: 700;
  }
}
</style>
